<template>
  <div class="flow_data_item">
    <el-form
      :model="form"
      ref="form"
      :inline="false"
      size="normal"
      label-position="top"
      v-if="parameters && parameters.length !== 0"
    >
      <el-row :gutter="10">
        <!-- {{ parameters }} -->
        <el-col :span="24" v-for="(item, index) in parameters" :key="index">
          <el-form-item
            :label="item.name"
            class="is-required"
            v-if="item && !item.isMultiValue"
          >
            <div class="parameter_item">
              <PopoverInput
                :title="item.name"
                :value="item[objKey]"
                @input="
                  (even) => {
                    inputChange(even, item);
                  }
                "
                @changeRadio="
                  (row) => {
                    changeRadio(row, item, index);
                  }
                "
                :objKey="'arrNoOperator'"
                :keys="'filterFun22' + index"
              ></PopoverInput>
            </div>
          </el-form-item>
          <!-- {{ item && item.isMultiValue }} -->
          <div v-if="item && item.isMultiValue">
            <el-form-item
              v-for="(ele, eIndex) in item.value"
              :key="eIndex"
              :label="eIndex == 0 ? item.name : ''"
              class="is-required"
            >
              <div class="parameter_item">
                <PopoverInput
                  :title="ele.name"
                  :value="ele[objKey]"
                  @input="
                    (even) => {
                      inputChange(even, ele);
                    }
                  "
                  @changeRadio="
                    (row) => {
                      changeRadio(row, ele, eIndex);
                    }
                  "
                  :objKey="'arrNoOperator'"
                  :keys="'filterFun22' + eIndex"
                ></PopoverInput>
                <svg-icon
                  v-if="eIndex === 0"
                  class="trash icon"
                  :icon-class="'plus'"
                  @click="handDelAdd(item, index)"
                ></svg-icon>
                <svg-icon
                  v-if="eIndex !== 0"
                  class="trash icon"
                  :icon-class="'trash'"
                  @click="handItemDel(item, index, eIndex)"
                ></svg-icon>
              </div>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import PopoverInput from "@/components/PopoverInput";
import { mapGetters } from "vuex";
import _ from "lodash";
export default {
  components: {
    PopoverInput,
  },
  computed: {
    ...mapGetters(["extensions"]),
    // items() {
    //   var _search = this.row[objKey];
    //   // 深拷贝-不然过滤之后下次在过滤拿的是上一次过滤之后的数据
    //   let newArr = _.cloneDeep(this.extensions.funArr);
    //   if (_search) {
    //     newArr.forEach((item) => {
    //       item.list = _.filter(item.list, function (o) {
    //         return o.value.indexOf(_search) != -1;
    //       });
    //     });
    //   }
    //   return newArr;
    // },
  },
  props: {
    objKey: {
      type: "",
      default: "",
    },
    parameters: {
      type: Array,
      default: () => [],
    },
    isAdd: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      popShow: false,
      row: {},
      form: {},
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      },
      rowIndex: 0,
    };
  },
  methods: {
    changeRadio(row, item, index) {
      item[this.objKey] = row.valueType;
      this.$emit("changeRadio", row, item, index);
    },
    inputChange($event, item) {
      item[this.objKey] = $event;
      this.$emit("changeRadio", { valueType: $event }, item);
    },
    changeInputValue(row, index) {
      this.row = row;
      this.rowIndex = index;
    },
    //删除属性
    handItemDel(item, index, eIndex) {
      this.$emit("handItemDel", index, eIndex);
      // this.parameters.splice(index, 1);
    },
    // 添加属性
    handDelAdd(item, index) {
      this.$emit("handItemAdd", item, index);
    },
  },
};
</script>

<style scoped lang='scss'>
/deep/ .spot_point {
  top: 20px !important;
}
.flow_data_item {
  margin-bottom: 10px;
}
.parameter_item {
  display: flex;
  align-items: center;
  .icon {
    margin-left: 6px;
    color: #999999;
  }
}
.flow_data_item {
  margin-top: 10px;
  /deep/ .el-form-item__label {
    padding-bottom: 0 !important;
  }
  /deep/ .el-form-item {
    margin-bottom: 0;
    width: 100%;
  }
}
.flow_data_item /deep/ .el-form-item__label {
  width: 100px;
}
</style>